<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
    
    <%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<link rel="stylesheet" href="<%=basePath%>/lib/tablesorter/themes/blue/style.css" type="text/css" id="" media="print, projection, screen" />
		<script type="text/javascript" src="<%=basePath%>/lib/tablesorter/jquery-latest.js"></script>
		<script type="text/javascript" src="<%=basePath%>/lib/tablesorter/jquery.tablesorter.js"></script>
		<script type="text/javascript">
		$(function() {
			$("table").tablesorter({debug: false});
			$("table").tablesorterPager({container: $("#pager")});
		});
		</script>
		
	</head>
</head>
<body>
	   <div style="overflow: auto; width: 100%;">
	<table id="rowspan" cellspacing="0" class="tablesorter">
	<thead>
	
		<tr>
			<th>Major</th>
			<th>Gender</th>
			<th>English</th>
			<th>Japanese</th>
			<th>Calculus</th>
			<th>Geometry</th>
			<th>Japanese</th>
			<th>Calculus</th>
			<th>Geometry</th>
			<th>Japanese</th>
			<th>Calculus</th>
			<th>Geometry</th>
			<th>Geometry</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Student01</td>
			<td>Languages</td>
			<td>male</td>
			<td>80</td>
			<td>70</td>
			<td>75</td>
			<td>80%</td>
			<td>70</td>
			<td>75</td>
			<td>80%</td>
			<td>70</td>
			<td>75</td>
			<td>80%</td>
		</tr>
		<tr>
			<td>Student02</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>90</td>
			<td>88</td>
			<td>100</td>
			<td>90%</td>
			<td>90</td>
			<td>88</td>
			<td>100</td>
			<td>90%</td>
			<td>90</td>
			<td>88</td>
			

		</tr>
		<tr>
			<td>Student03</td>
			<td>Languages</td>
			<td>female</td>
			<td>85</td>
			<td>95</td>
			<td>80</td>
			<td>85%</td>
			<td>95</td>
			<td>80</td>
			<td>85%</td>
			<td>95</td>
			<td>80</td>
			<td>85%</td>
		</tr>
	</tbody>
</table>
</div>
<div id="pager" class="pager">
	<form>
		<img src="../addons/pager/icons/first.png" class="first"/>
		<img src="../addons/pager/icons/prev.png" class="prev"/>
		<input type="text" class="pagedisplay"/>
		<img src="../addons/pager/icons/next.png" class="next"/>
		<img src="../addons/pager/icons/last.png" class="last"/>
		<select class="pagesize">
			<option selected="selected"  value="10">10</option>
			<option value="20">20</option>
			<option value="30">30</option>
			<option  value="40">40</option>
		</select>
	</form>
</div>

	</body>
</html>